<template>
  <div>
    <section v-if="!showLoading" class="shop_container">
      <nav class="goback" @click="goback">
        <svg width="4rem" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:3" />
        </svg>
      </nav>
    </section>
    <header class="shop_detail_header" ref="shopheader" :style="{zIndex: showActivities? '14':'10'}">
      <div class="header_cover_img_con">
        <img :src="imgBaseUrl + shopDetailData.image_path" class="header_cover_img">
      </div>
      <section class="description_header">
        <router-link to="/shop/shopDetail" class="description_top">
          <section class="description_left">
            <img :src="imgBaseUrl + shopDetailData.image_path">
          </section>
          <section class="description_right">
            <h4 class="description_title ellipsis">{{shopDetailData.name}}</h4>
            <p class="description_text">商家配送／{{shopDetailData.order_lead_time}}分钟送达／配送费¥{{shopDetailData.float_delivery_fee}}</p>
            <p class="description_promotion ellipsis">公告：{{promotionInfo}}</p>
          </section>
          <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow">
            <path d="M0 0 L8 7 L0 14" stroke="#fff" stroke-width="1" fill="none" />
          </svg>
        </router-link>
        <footer class="description_footer" v-if="shopDetailData.activities.length" @click="showActivitiesFun">
          <p class="ellipsis">
            <span class="tip_icon" :style="{backgroundColor: '#' + shopDetailData.activities[0].icon_color, borderColor: '#' + shopDetailData.activities[0].icon_color}">{{shopDetailData.activities[0].icon_name}}</span>
            <span>{{shopDetailData.activities[0].description}}（APP专享）</span>
          </p>
          <p>{{shopDetailData.activities.length}}个活动</p>
          <svg class="footer_arrow">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left"></use>
          </svg>
        </footer>

      </section>
    </header>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {},
  mounted() {}
}
</script>

<style scoped>
</style>